<template>
	<skeleton :skeleton="{name:'result'}" :showSkeleton="showSkeleton">
		<block slot="content">
			<no-data :showErrorTip="noData">
				<view slot="content" class="container">
					<view class="type-title">
						<text>练习类型：</text>
						<text>{{res.homeworkName}}</text>
					</view>
					<view class="graph">
						<view class="type">
							<view class="type-time">
								<text>交卷时间：</text>
								<text>{{res.createTime}}</text>
							</view>
						</view>
						<view class="stat">
							<view class="stat-answer">
								<view class="stat-answer-chart">
									<canvas :style="{width:ringData.width,height:ringData.height}" canvas-id="canvasRing" id="canvasRing" class="charts"></canvas>
									<view class="stat-answer-title">
										<view>{{res.correct}}</view>
										<view class="stat-answer-subTitle">(共{{res.total}}题)</view>
									</view>
								</view>
								<view class="stat-answer-lable">答对</view>
							</view>
							<view class="stat-answer">
								<view class="stat-answer-chart">
									<canvas :style="{width:ringData.width,height:ringData.height}" canvas-id="canvasTime" id="canvasTime" class="charts"></canvas>
									<view class="stat-usetime-title used-time">
										<view>{{wasteTime}}</view>
									</view>
								</view>
								<view class="stat-answer-lable">用时</view>
							</view>
						</view>
					</view>
					<view class="answercard">
						<view class="answercard-title">答题卡</view>
						<view class="answercard-content">
							<view class="answercard-content-item" v-for="(item,index) in res.detail" :key="item.subjectId">
								<text class="answercard-content-item-num" :class='[item.status=="0"?"answercard-content-right":""]' @click="linkAnsly(2,item.subjectId)">{{index+1}}
								</text>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="knowledge">
						<view class="knowledge-title">知识点概况</view>
						<view class="knowledge-content" v-for="(item,index) in res.knowledge" :key="index">
							<image class="knowledge-content-img" src="/static/exam/add.png" mode="aspectFit"></image>
							<view class="knowledge-content-right">
								<view class="knowledge-content-text">{{item.title}}</view>
								<view class="knowledge-content-sub">共{{item.total}}题，答对{{item.right}}题，正确率{{item.per}}%
								</view>
							</view>
						</view>
					</view>

					<view class="btn">
						<view class="btn-left">
							<text @click="linkAnsly(0,'')">错题解析</text>
						</view>
						<view class="btn-right">
							<text @click="linkAnsly(1,'')">全部解析</text>
						</view>
					</view>
				</view>
			</no-data>
		</block>
	</skeleton>
</template>

<script>
	import {isEmpty} from '@/utils/index';
	import HomeworkService from '@/services/homeworkService.js';
	const homeworkService = new HomeworkService()
	export default {
		data() {
			return {
				lessonId:null,
				showSkeleton: true,
				noData: false,
				delta: 1,
				analyType: 1, //1单题解析，2错题解析，3全部解析
				canvasSetting: {
					width: uni.upx2px(160),
					height: uni.upx2px(160),
					ringWidth: uni.upx2px(12)
				},
				ringData: [],
				timeRingData: [{
					"data": 1,
					"color": "#5ea1f8",
					"rate": 100
				}],
				res: {}
			}
		},
		computed: {
			wasteTime() {
				if (!isEmpty(this.res.time)) {
					try{
						const duration = Math.round(this.res.time * 60);
						let h = Math.floor(duration / 3600);
						let m = Math.floor((duration - h * 3600) / 60);
						let s = duration - h * 3600 - m * 60;
						h = this.toDouble(h)
						m = this.toDouble(m)
						s = this.toDouble(s)
						const time = h + ":" + m + ":" + s
						return time;
					}catch(e){
						return "00:00:00";
					}
				}
				return "00:00:00";
			}
		},
		onLoad(query) {
			this.lessonId = query.lessonId
			this.loadHomeworkReport()
		},
		methods: {
			loadHomeworkReport(){
				const params = {
					lessonId:this.lessonId
				}
				homeworkService.homeworkReport(params).then(res=>{
					this.loadDataCallback(res);
				}).catch(e=>{
					
				}).then(()=>{
					this.showSkeleton = false; 
				})
			},
			loadDataCallback(response){
				if (response.success) {
					this.res = response.result;
					this.analyzeRingData();
					this.drawRing("canvasRing", this.ringData);
					this.drawRing("canvasTime", this.timeRingData);
				} else {
					uni.showToast({
						title: response.message,
						duration: 2000,
						icon: "none"
					})
				}
			},
			//分析得到环形图分析数据
			analyzeRingData: function() {
				let rightRate = parseInt(this.res.correct * 100 / this.res.total);
				let rightData = {
					"color": "#f1685d",
					"rate": rightRate
				};
				let wrongData = {
					"color": "#5ea1f8",
					"rate": 100 - rightRate
				};
				this.ringData.push(rightData, wrongData);
			},
			//跳转到解析页面
			linkAnsly(type, subjectId) {
				uni.navigateTo({
					url: `/pages/homework/answerAnalysis?name=${this.res.homeworkName}&type=${type}&lessonId=${this.lessonId}&subjectId=${subjectId}`
				})
			},
			drawRing: function(canvasId, ringData) {
				const context = uni.createCanvasContext(canvasId);
				const {
					width,
					height,
					ringWidth
				} = this.canvasSetting;
				let radius = (Math.min(width, height) - ringWidth) / 2;
				let startAngle = -0.25 * 2 * Math.PI;
				for (let i = 0; i < ringData.length; i++) {
					let item = ringData[i];
					context.beginPath();
					let endAngle = startAngle + item.rate * 2 * Math.PI / 100;
					if (i === ringData.length - 1) {
						endAngle = 0.75 * 2 * Math.PI
					}
					context.arc(width / 2, height / 2, radius, startAngle, endAngle);
					startAngle = endAngle;
					context.setStrokeStyle(item.color);
					context.setLineWidth(ringWidth);
					context.stroke()
				}
				context.draw();
			},
			//转换成2位数，前面补0
			toDouble(value) {
				return value < 10 ? "0" + value : "" + value;
			},
		}
	}
</script>

<style lang='scss' scoped>
	.container {
		height: 100%;
		color: #fff;
	}

	.type-title {
		height: 108upx;
		line-height: 108upx;
		font-size: 30upx;
		color: #333333;
		font-weight: bold;
		padding: 0 20upx;
	}

	.graph {
		height: 354upx;
		background-color: #ffffff;
		box-shadow: 0upx 4upx 20upx 0upx rgba(153, 153, 153, 0.2);
		border-radius: 8upx;
		border: solid 1px #f7f7f7;
		margin: 0 20upx;
	}

	.type {
		height: 108upx;
		line-height: 108upx;
		padding: 0 38upx;

		&-time {
			display: inline-block;
			width: 70%;
			font-size: 24upx;
			color: #999999;
		}

		&-right {
			display: inline-block;
			width: 30%;
			font-size: 28upx;
			color: #5ea1f8;
			text-align: right;
		}
	}

	.stat {
		padding: 0 20upx;

		&-answer {
			display: inline-block;
			width: 50%;

			&-lable {
				font-size: 28upx;
				color: #666666;
				text-align: center;
				margin-top: 22upx;
			}

			&-chart {
				width: 160upx;
				height: 160upx;
				margin: 0 auto;
				text-align: center;
				position: relative;
			}

			&-title {
				height: 100upx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				font-size: 48upx;
				color: #444444;
			}

			&-subTitle {
				font-size: 20upx;
				color: #999999;
			}
		}

		&-usetime {
			width: 345upx;
			height: 220upx;
			background: #f0f5ff;
			border-radius: 25upx;

			&-text {
				color: #333;
				font-size: 28upx;
				margin: 15upx 25upx;
				font-weight: bold;
			}

			&-title {
				font-size: 30upx;
				color: #333333;
				height: 50upx;
				line-height: 50upx;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}

		}
	}

	.answercard {
		width: 100%;

		&-title {
			font-size: 30upx;
			color: #333;
			font-weight: bold;
			margin-top: 60upx;
			padding: 0 20upx;
		}

		&-content {
			width: 710upx;
			border-radius: 15upx;
			padding: 0 5upx;
			margin: 20upx 0;

			&-item {
				display: inline-block;
				width: 60upx;
				height: 60upx;
				margin: 20upx 40upx;
				background: #f1685d;
				border-radius: 50%;

				&-num {
					display: block;
					width: 60upx;
					height: 60upx;
					text-align: center;
					line-height: 60upx;
				}
			}

			&-right {
				background: #5ea1f8;
				border-radius: 50%;
			}

		}
	}

	.knowledge {
		width: 100%;
		padding: 0 20upx;
		margin-bottom: 80upx;

		&-title {
			font-size: 30upx;
			color: #333;
			font-weight: bold;
			margin: 20upx 0;
		}

		&-content {
			height: 120upx;
			padding: 20upx 0;

			&-right {
				display: inline-block;
			}

			&-text {
				font-size: 28upx;
				color: #333;
				font-weight: bold;
			}

			&-sub {
				font-size: 24upx;
				color: #666;
				padding-top: 10upx;
			}

			&-img {
				width: 26upx;
				height: 26upx;
				margin-right: 6upx;
				margin-top: 6upx;
				vertical-align: top;
			}

		}
	}

	.btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		box-shadow: 0upx -4upx 20upx 0upx rgba(153, 153, 153, 0.2);
		font-size: 28upx;

		&-left {
			display: inline-block;
			width: 50%;
			height: 100%;
			color: #333;
			background-color: #ffffff;
		}

		&-right {
			display: inline-block;
			width: 50%;
			height: 100%;
			color: #fff;
			background: #5ea1f8;
		}

	}

	.charts {
		width: 160upx;
		height: 160upx;
	}

	.used-time {
		font-size: 32upx;
	}
</style>
